<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <link href="/admin/lib/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>

</head>

<body>
<article class="page-container">
    <form class="form form-horizontal" id="form" autocomplete="off">
        <div class="row cl">
            <label class="form-label col-sm-3">样品类型：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->toolname }}</label>
            <input type="hidden" name="tool_id" value="{{ $data_rel->tool_id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">检验标准：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->num }}</label>
            <input type="hidden" name="std_id" value="{{ $data_rel->std_id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">检验项目：</label>
            <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->itemname }}</label>
            <input type="hidden" name="item_id" value="{{ $data_rel->id }}">
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">映射检验标准：</label>
            <div class="form-label col-sm-6">
                <select class="input-text required" name="std_id_map" id="">
                    <option value="">请选择</option>
                    @foreach($data_rel_other as $k => $item)
                        <option value="{{$k}}"
                                @if(isset($map['info']->std_id) && $map['info']->std_id === $k) selected @endif >{{$item[0]->num}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3">映射检验项目：</label>
            <div class="form-label col-sm-6">
                <select class="input-text required" name="id_map" id="">
                    @if(isset($map['info']->std_id))
                        @foreach($data_rel_other[$map['info']->std_id] as $k => $item)
                            <option value="{{$item->id}}"
                                    @if($item->id === $map['info']->id) selected @endif >{{$item->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        </div>
        {{csrf_form_field()}}
        @csrf

        <div class="row cl">
            <div class="col-sm-9 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;一键映射&nbsp;&nbsp;">
                <input class="btn btn-primary radius f-r mr-15" type="submit" value="保存表格" form="form-table">
            </div>
        </div>
    </form>
    <div class="mt-15">
        <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
            <thead>
            <tr class="text-c">
                <th>当前标准：{{ $data_rel->num }}</th>
                <th>映射标准: <span id="tb_num_rel"></span></th>
            </tr>
            </thead>
            <tbody>
            <tr class="va-t">
                <td>
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr class="text-c">
                            <th>数据标题</th>
                            <th>单位</th>
                            <th>映射关系</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $val)
                            <tr class="text-c">
                                <td class="data_key">{{ $val->data_key }}</td>
                                <td>{{ $val->data_unit }}</td>
                                <td id="exist-{{$val->id_map}}">
                                    @if($val->id_map > 0)
                                        已映射编号:{{$val->id_map}}
                                    @else
                                        <span class="btn btn-primary radius size-MINI" onclick="map(this,'{{$val->id}}')">点击映射</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </td>
                <td>
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr class="text-c">
                            <th>编号</th>
                            <th>数据标题</th>
                            <th>单位</th>
                        </tr>
                        </thead>
                        <tbody id="tb_rel_tr">
                        @if(!empty($map))
                            @foreach ($map['data'] as $val)
                                <tr class="text-c">
                                    <td>{{ $val->id }}</td>
                                    <td>{{ $val->data_key }}</td>
                                    <td>{{ $val->data_unit }}</td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script src="/admin/lib/select2/4.0.7/js/select2.min.js"></script>

<script type="text/javascript">
    var data_rel_other = @json($data_rel_other);
    var map_data = @json(isset($map['data']) ? $map['data'] : []);
    $(function () {
        $('#tb_num_rel').text($('select[name="std_id_map"]').find("option:selected").text());
        var index2;
        $('.select2').select2();
            $("#form").validate({
                rules: {
                    std_id_map: {
                        required: true,
                    },
                    id_map: {
                        notSpace: true,
                    },
                },
// onkeyup:false,
// focusCleanup:false,
                success: "valid",
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        type: 'post',
                        url: "",//自己提交给自己可以不写url
//beforeSend  beforeSubmit
                        beforeSend: function () {
                            //0.4透明度 白色遮罩
                            index2 = layer.load(2, {shade: [0.3, '#fff']});
                        },
                        complete: function () {
                            layer.close(index2);
                        },
                        success: function (data) {
                            let time = 2000;
                            //判断添加结果
                            if (parseInt(data.code) === 1) {
                                window.location.reload();//刷新
                                time = 1000;
                            }
                            layer.msg(data.msg, {icon: data.code, time: time});
                        },
                        error: function (data) {
                            console.log(data);
                            ajax_error(data);
                        }///error---end
                    });
                }
            });
        });
        //对应检测项目
        $('select[name="std_id_map"]').on('change',function () {
            console.log(111111111)
            let check_std_id = $(this).val();
            $('#tb_num_rel').text($(this).find("option:selected").text());
            let item_rels = data_rel_other[check_std_id];
            let options = "<option value=''>请选择</option>";
            for (index in item_rels) {
                let id = item_rels[index].id;
                options += "<option value='" + id + "'>" + item_rels[index].name + "</option>";
            }
            $('select[name="id_map"]').html(options);
        })
        //对应检测项目数据
        $('select[name="id_map"]').change(function () {
            let id = $(this).val();
            $('#tb_item_rel').text($(this).find("option:selected").text());
            $.ajax({
                type: 'GET',
                url: 'relation?id=' + id,
// dataType: 'json',
                success: function (data) {
                    let str = "";
                    for (index in data) {
                        str += '<tr class="text-c">' +
                            '<td>' + data[index].id + '</td>' +
                            '<td>' + data[index].data_key + '</td>' +
                            '<td>' + data[index].data_unit + '</td>' +
                            '</tr>';
                    }
                    $('#tb_rel_tr').html(str);
                },
                error: function (data) {
                    ajax_error(data);
                },
                beforeSend: function () {
//0.4透明度 白色遮罩
                    index2 = layer.load(2, {shade: [0.05, '#000']});
                },
                complete: function () {
                    layer.close(index2);
                },
            });
        })
        function map(e,testdata_key_id) {
            let title = $(e).parent('td').siblings('td.data_key').text();
            let for_map_data = [];
            let content = '<div class="ml-20 mt-20 text-c col-sm-10"><select class="select2 input-text" name="id_map_key">';
            for (index in map_data) {
                $('#exist-' + map_data[index].id)[0] ? '' : for_map_data.push(map_data[index]);
            }
            content += for_map_data.length === 0 ? '<option value="">无可映射关系</option>' : '<option value="">请选择</option>';
            let mapindexdata = null;
            for (index in for_map_data) {
                mapindexdata = for_map_data[index];
                content += '<option value="' + mapindexdata.id + '">标题：' + mapindexdata.data_key + ' &nbsp;&nbsp;&nbsp;&nbsp;单位：' + mapindexdata.data_unit + '</option>';
            }
            content += '</select>' +
                '<input class="mt-20 btn btn-primary radius" type="button" value="确定" onclick="formAjax('+testdata_key_id+')">' +
                '</div>';
            layer.open({
                type: 1, //类型
                closeBtn: 1, //关闭按钮是否显示 1显示0不显示
                title: '点对点映射: ' + title, //页面标题
                shadeClose: true, //点击遮罩区域是否关闭页面
                shade: 0.5,  //遮罩透明度
                area: ['500px', '300px'],  //弹出层页面比例
                content: content,
            })
        }

        function formAjax(testdata_key_id) {
            let id_map_key = $("[name=id_map_key]").val();
            if (id_map_key === '') {
                layer.msg('请选择映射关系！');
                return false;
            }
            $.ajax({
                type: 'post',
                url: '',
                data: {
                    _token: '{{csrf_token()}}',
                    id_map: id_map_key,
                    testdata_key_id: testdata_key_id,
                },
                success: function (data) {
                    data.msg = data.code == 1 ? '映射成功' : '映射失败！';
                    let time = data.code == 1 ? 1000 : 2000;
                    layer.msg(data.msg, {icon: data.code, time: time});
                    window.location.reload();//刷新
                },
                error: function (data) {
                    ajax_error(data);
                },
                beforeSend: function () {
//0.4透明度 白色遮罩
                    index2 = layer.load(2, {shade: [0.05, '#000']});
                },
                complete: function () {
                    layer.close(index2);
                },
            });
        }

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>

</html>
